<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="#url('/static/comm/ECharts/gallery/echarts-all-3.js')"></script>
<!--       <script type="text/javascript" src="#url('/static/comm/ECharts/gallery/ecStat.min.js')"></script>
       <script type="text/javascript" src="#url('/static/comm/ECharts/gallery/dataTool.min.js')"></script>
       <script type="text/javascript" src="#url('/static/comm/ECharts/gallery/china.js')"></script>
       <script type="text/javascript" src="#url('/static/comm/ECharts/gallery/world.js')"></script>
       <script type="text/javascript" src="#url('/static/comm/ECharts/gallery/bmap.min.js')"></script>-->
       <div id ="piechart"  Style ="height:500px"></div>
       <script type="text/javascript">
           // 基于准备好的dom，初始化echarts实例
           var myChart = echarts.init(document.getElementById('piechart'));
           //图表


           option = {
               tooltip: {
                   trigger: 'item',
                   formatter: "{a} <br/>{b}: {c} ({d}%)"
               },
               legend: {
                   orient: 'vertical',
                   x: 'right',
                   data:['曲臂式','直臂式','剪叉式']
               },
               series: [
                   {
                       name:'',
                       type:'pie',
                       radius: ['50%', '70%'],
                       avoidLabelOverlap: false,
                       label: {
                           normal: {
                               show: true,
                               position: 'left'
                           },
                           emphasis: {
                               show: true,
                               textStyle: {
                                   fontSize: '20',
                                   fontWeight: 'bold'
                               }
                           }
                       },
                       labelLine: {
                           normal: {
                               show: true
                           }
                       },
                       data:[
                           {value:335, name:'曲臂式'},
                           {value:310, name:'直臂式'},
                           {value:234, name:'剪叉式'},
                       ]
                   }
               ]
           };


           // 使用刚指定的配置项和数据显示图表。
           myChart.setOption(option);
           //自适应
           window.onresize = myChart.resize;
       </script>
   </body>
</html>